<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import CountUp from "./CountUp.svelte";
    import { Space } from "../Space";
    import { Button } from "../Button";
    import { Input } from "../Input";

    const { Story } = defineMeta({
        title: "Components/Other/CountUp",
        component: CountUp,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });

    let value = $state(2000);
    let countup: any;
    let countup2: any;
</script>

<Story name="Default">
    {#snippet template(args)}
        <Space dir="v">
            <CountUp value={2000} style="font-size: 32px" bind:this={countup} duration={6} />
            <Space dir="h">
                <Button
                    onclick={() => {
                        countup.pauseResume();
                    }}>暂停/继续</Button
                >
                <Button
                    onclick={() => {
                        countup.reset();
                    }}>重置</Button
                >
                <Button
                    onclick={() => {
                        countup.start();
                    }}>开始</Button
                >
                <Button
                    onclick={() => {
                        countup.update(value);
                    }}>更新至：</Button
                >
                <Input style="width: 100px" bind:value />
            </Space>
        </Space>
    {/snippet}
</Story>

<Story name="Decimal">
    {#snippet template(args)}
        <Space dir="v">
            <CountUp value={2000} style="font-size: 32px" bind:this={countup2} duration={4} decimal={2} />
            <Space dir="h">
                <Button
                    onclick={() => {
                        countup2.reset();
                        countup2.start();
                    }}>重新开始</Button
                >
            </Space>
        </Space>
    {/snippet}
</Story>
